<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
		<script type="text/javascript">
			$(function (){
				var images = [];
				$.ajax(
					{
						url:"message.json",
						type:"get",
						dataType:"json",
						async:false,
						success:function(data){
							images = data;
							console.log(images)
						}
					}
				)
				display();
			})
			function display(){
				$("tbody").html("")
				for (let i = 0; i < images.length; i++) {
					let tr=$("<tr></tr>")
					let td1=newTD(images[i].id)
					let td2=newTD(images[i].name)
					let td3=newTD(images[i].dynasty)
					let td4=newTD(images[i].author)
					tr.append(td1)
					tr.append(td2)
					tr.append(td3)
					tr.append(td4)
					let td=$("<td></td>")
					let btn=$("<button>增加</button>")
				}
			}
			function newTD(v){
				let td=$("<td></td>")
				let input=$("<input type='text' />")
				input.attr("value",v)
				td.append(input)
				return td;
			}
		</script>
	</head>
	<body>
		<table>
			<thead>
				<tr>
					<td>序号</td>
					<td>名称</td>
					<td>朝代</td>
					<td>作者</td>
					<td>操作</td>
				</tr>
			</thead>
			<tbody></tbody>
			<tfoot>
				<tr>
					<td colspan="5"><button class="add">增加</button></td>
				</tr>
			</tfoot>
		</table>
	</body>
</html>
